<template>
	<div class="container">
		<div class="integ-opera">
			<div class="filter-container">
				<!-- label-width="90px" -->
				<el-form :model="form" class="form" inline>
					<!-- 时间维度 -->
					<el-form-item label="时间维度">
						<el-select v-model="form.timeType" placeholder="请选择">
							<el-option label="按月" value="month" />
							<el-option label="按季" value="quarter" />
							<el-option label="按半年" value="halfyear" />
							<el-option label="按年" value="year" />
						</el-select>
					</el-form-item>

					<!-- 动态时间选择 -->
					<el-form-item v-if="form.timeType === 'month'" label="选择月份">
						<el-date-picker v-model="form.month" type="month" placeholder="选择月份" value-format="MM"
							format="MM" :picker-options="{ firstDayOfWeek: 1 }" />
					</el-form-item>

					<el-form-item v-else-if="form.timeType === 'quarter'" label="选择季度">
						<el-select v-model="form.quarterYear" placeholder="年份">
							<el-option v-for="y in last10Years" :key="y" :label="y" :value="y" />
						</el-select>
						<el-select v-model="form.quarter" placeholder="季度" style="margin-left: 8px">
							<el-option label="Q1" value="Q1" />
							<el-option label="Q2" value="Q2" />
							<el-option label="Q3" value="Q3" />
							<el-option label="Q4" value="Q4" />
						</el-select>
					</el-form-item>

					<el-form-item v-else-if="form.timeType === 'halfyear'" label="选择半年">
						<el-select v-model="form.halfYearYear" placeholder="年份">
							<el-option v-for="y in last10Years" :key="y" :label="y" :value="y" />
						</el-select>
						<el-select v-model="form.halfYear" placeholder="半年" style="margin-left: 8px">
							<el-option label="上半年" value="H1" />
							<el-option label="下半年" value="H2" />
						</el-select>
					</el-form-item>

					<el-form-item v-else-if="form.timeType === 'year'" label="选择年份">
						<el-select v-model="form.year" placeholder="请选择年份">
							<el-option v-for="y in last10Years" :key="y" :label="y + '年'" :value="String(y)" />
						</el-select>
					</el-form-item>

					<!-- 供应商 -->
					<el-form-item label="供应商">
						<el-select v-model="form.supplier" placeholder="请选择供应商" filterable>
							<el-option v-for="item in supplierList.value" :key="item.id" :label="item.supplier_name"
								:value="item.id" />
						</el-select>
					</el-form-item>

					<el-form-item>
						<el-button type="primary" @click="applyFilter">应用筛选</el-button>
						<el-button @click="reset">重置</el-button>
					</el-form-item>
				</el-form>
			</div>
			<div class="order-data mt20">
				<div class="title">订单数据</div>
				<div class="orders">
					<div class="item-order" v-for="(item, index) in 3" :key="index">
						<div class="tit1">
							<div>{{ index === 0 ? 'TOP10 一类材料' : index === 1 ? 'TOP10 一类订单' : 'TOP10 一类供应商' }}</div>
							<!-- <div>+</div> -->
						</div>
						<div class="tit2">
							<div v-if="index === 0">
								<div v-for="(item, i) in index === 0 ? state.statistics : index === 1 ? state.statistics : state.supplierData"
									:key="i" class="tit2_item">
									<div>{{ i + 1 }}</div>
									<div>{{ item.masterial_name }}</div>
									<div>{{ item.use_count }}</div>
								</div>
							</div>
							<div v-if="index === 1">
								<div v-for="(item, i) in state.statistics" :key="i" class="tit2_item">
									<div>{{ item.masterial_name }}</div>
									<div>{{ item.total_price }}</div>
									<div>{{ item.use_count }}</div>
								</div>
							</div>
							<div v-if="index === 2">
								<div v-for="(item, i) in state.supplierData" :key="i" class="tit2_item">
									<div>{{ item.supplier_name }}</div>
									<div>{{ item.total_price }}</div>
									<div>{{ item.use_count }}</div>
								</div>
							</div>
							<div class="else"
								v-if="(index === 0 ? state.statistics : index === 1 ? state.statistics : state.supplierData).length === 0">
								暂无数据...
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup name="homeProject">
import { reactive, onMounted, onBeforeMount, watch } from 'vue';
import { getStatistics } from '/@/api/home/index';
import { ElMessage, ElButton } from 'element-plus';
import { suppliers } from '/@/api/startfab/index';

onBeforeMount(() => { });

const state = reactive({
	statistics: {},
	orderData: {},
	supplierData: {},
});

const supplierList = reactive([]);

// 获取当前年月
const currentYear = new Date().getFullYear();
const currentMonth = String(new Date().getMonth() + 1).padStart(2, '0'); // 当前月份，补零

const last10Years = Array.from({ length: 10 }, (_, i) => currentYear - i);

const form = reactive({
	timeType: 'month',
	month: currentMonth, // 默认当前月
	year: '',
	quarterYear: currentYear,
	quarter: 'Q1',
	halfYearYear: currentYear,
	halfYear: 'H1',
	supplier: '', // 初始化为空，稍后设置为第一个供应商
});

// 监听供应商列表变化，设置默认供应商
watch(() => supplierList.value, (newList) => {
	if (newList && newList.length > 0 && !form.supplier) {
		form.supplier = newList[0].id; // 设置第一个供应商为默认值
	}
}, { immediate: true });

onMounted(() => {
	getStatisticsData();
	getSuppliersList();
});

const getStatisticsData = async () => {
	const res = await getStatistics();
	if (res.code === 10000) {
		state.statistics = res.data.masterial; // 材料
		state.orderData = res.data.order; // 订单
		state.supplierData = res.data.supplier; // 供应商
	} else {
		ElMessage.error(res.msg);
	}
};

const getSuppliersList = async () => {
	const res = await suppliers();
	if (res.code === 10000) {
		supplierList.value = res.data.list;
		// 如果供应商列表为空，清空供应商选择
		if (!res.data.list || res.data.list.length === 0) {
			form.supplier = '';
		}
	} else {
		ElMessage.error(res.msg);
	}
};

const applyFilter = async () => {
	let result = { ...form };

	// 格式化 period 字段
	if (form.timeType === 'month') {
		result.period = form.month;
	} else if (form.timeType === 'year') {
		result.period = form.year;
	} else if (form.timeType === 'quarter') {
		result.period = `${form.quarterYear}-${form.quarter}`;
	} else if (form.timeType === 'halfyear') {
		result.period = `${form.halfYearYear}-${form.halfYear === 'H1' ? '上半年' : '下半年'}`;
	}

	console.log('筛选条件:', result);

	// 调用 API 获取对账数据
	const res = await getStatistics(result);
	if (res.code === 10000) {
		state.statistics = res.data.masterial; // 材料
		state.orderData = res.data.order; // 订单
		state.supplierData = res.data.supplier; // 供应商
	} else {
		ElMessage.error(res.msg);
	}
};

const reset = () => {
	Object.assign(form, {
		timeType: 'month',
		month: currentMonth, // 重置为当前月
		year: '',
		quarterYear: currentYear,
		quarter: 'Q1',
		halfYearYear: currentYear,
		halfYear: 'H1',
		supplier: supplierList.value.length > 0 ? supplierList.value[0].id : '', // 重置为第一个供应商
	});
	getStatisticsData(); // 重置后重新获取数据
};
</script>
<style scoped lang="scss">
.container {
	.mt20 {
		margin-top: 20px;
	}

	.integ-opera {
		.filter-container {
			padding: 20px;
			background: #f5f7fa;
			border-radius: 4px;
		}

		::v-deep .search-btns {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.el-input-group__append {
				padding: 0px 15px;

				.el-icon {
					color: #333333;
					margin-right: 0px;
				}
			}

			.el-button {
				color: #ffffff;
			}
		}

		background: #ffffff;
		padding: 15px 10px;
		border-radius: 4px;

		.title {
			color: #000;
			font-family: 'PingFang SC';
			font-size: 14px;
			font-style: normal;
			font-weight: 600;
			line-height: normal;
			padding: 0px 10px;
		}

		.sum-panel {
			height: 125px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 15px;

			.item-class {
				height: 100%;
				flex: 1;
				border-radius: 8px;
				padding: 15px 19px;
				color: #000;
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 400;
				position: relative;
				background: #e1f8e7;
				margin: 0px 10px;

				.title {
					font-size: 16px;
				}

				.total {
					font-size: 22px;
					font-weight: 600;
					margin-top: 12px;
				}

				.in-title-icon {
					display: flex;
					align-items: center;
					margin-top: 12px;
					font-size: 13px;

					.in-title {
						color: #999;
						margin-right: 7px;
					}

					.in-num {
						color: #f00;
						margin-right: 2px;
					}
				}
			}
		}

		.order-data {
			.orders {
				width: 100%;
				margin: 10px 0 10px;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;

				.item-order {
					width: 32%;
					height: 280px;
					margin: 0 0 12px 0;
					transition: 0.5s;
					border-radius: 10px;
					background: #f5f7ff;
					padding: 0;
					overflow: hidden;
					display: flex;
					flex-direction: column;

					.tit1 {
						flex-shrink: 0;
						height: 40px;
						line-height: 40px;
						color: #2549d8;
						font-weight: bold;
						display: flex;
						justify-content: space-between;
						padding: 0 15px;
						background: #e4e9ff;
						cursor: pointer;
					}

					.tit2 {
						flex: 1;
						overflow-y: auto;
						overflow-x: hidden;
						padding: 10px 0;
						background: #fff;

						.tit2_item {
							display: flex;
							justify-content: space-between;
							padding: 12px 12px;

							&:nth-child(2n) {
								background: #e4e9ff;
							}
						}

						.else {
							text-align: center;
							color: #999;
							font-size: 14px;
							font-weight: 400;
							line-height: 24px;
							padding: 20px 0;
						}

						&::-webkit-scrollbar {
							display: none;
						}
					}
				}
			}
		}

		.sort-data {
			.sorts {
				width: 100%;
				margin: 10px 0 10px;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
			}

			.item-sort {
				width: 19% !important;
				height: 220px;
				margin: 0 0 12px 0;
				transition: 0.5s;
				border-radius: 10px;
				background: #e1efff;
				padding: 0px 0 20px;
				overflow: hidden;

				.tit2 {
					width: 100%;
					color: #1269ca;
					line-height: 40px;
					font-size: 14px;
					font-weight: bold;
					display: flex;
					justify-content: space-between;
					padding: 0 15px;
					background: #cbe3fe;
					cursor: pointer;
				}
			}
		}
	}
}
</style>
